<template>

  <el-card shadow="hover">

    <!--条件查询导航-->
    <el-form :inline="true" :model="studentSearch" class="demo-form-inline">
      {{studentSearch}}
      <el-form-item>
        <el-input v-model="studentSearch.sname" placeholder="学生姓名"></el-input>
      </el-form-item>
      <el-form-item >
        <el-input v-model="studentSearch.addr" placeholder="学生住址"></el-input>
      </el-form-item>
      <el-form-item >
        <el-select v-model="studentSearch.cid" placeholder="所在班级">
          <el-option label="所有班级" value="0"/>
          <el-option :label="c.cname" :value="c.cid" v-for="c in classes"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button type="success" @click="addUI">添加</el-button>
        <el-button type="danger" @click="handleDelete">批量删除</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="students"
      @selection-change="handleSelectionChange"
      style="width: 100%">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="sid"
        align="center"
        label="学生编号"/>
      <el-table-column
        prop="sname"
        align="center"
        label="学生姓名"/>
      <el-table-column
        prop="sex"
        align="center"
        label="学生性别"/>
      <el-table-column
        prop="age"
        align="center"
        label="年龄"/>
      <el-table-column
        prop="addr"
        align="center"
        label="住址"/>
      <el-table-column
        prop="cname"
        align="center"
        label="所在班级"/>

      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--//分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total" align="right">
    </el-pagination>








    <!--学生修改或添加的对话框-->
    <el-dialog :title="student.sid ? '修改学生' : '添加学生'"
               :close-on-click-modal="false"
               :visible.sync="dialogFormVisible">
      {{student}}
      <el-form :model="student">
        <el-form-item label="学生姓名" :label-width="formLabelWidth">
          <el-input v-model="student.sname" autsocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学生性别" :label-width="formLabelWidth">
          <el-radio-group v-model="student.sex">
            <el-radio label="男" value="男"/>
            <el-radio label="女" value="女"/>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="学生年龄" :label-width="formLabelWidth">
          <el-input v-model="student.age" autsocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学生住址" :label-width="formLabelWidth">
          <el-input v-model="student.addr" autsocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所在班级" :label-width="formLabelWidth">
          <el-select v-model="student.cid" placeholder="请选择所在班级">
            <el-option label="所有班级" value="0"/>
            <el-option :label="c.cname" :value="c.cid" v-for="c in classes"/>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>

</template>



<script>
  import {findStudents,findByPage,search,save,delStud} from '@/api/student'
  import {findClasses} from "@/api/classes";

  export default {
    data() {
      return {
        students: [],
        classes:[],
        studentSearch:{},
        student:{},
        page:1,
        pageSize:5,
        total:100,
        dialogFormVisible:false,
        formLabelWidth:'100px',
        multipleSelection:[],
        sids:[],
      }
    },
    created() {
      //1、查询所有学生
      //this.findStudents();
      //2、开始分页查询
      //this.findByPage();
      //3、查询所有班级
      this.findClasses();
      //4、条件查询带分页
      this.search();

    },
    methods: {
      //1.1 查询所有学生
      findStudents(){
        findStudents().then(({data})=>{
          this.students = data.list;
        })
      },
      //2分页查询
      findByPage(){
        findByPage(this.page,this.pageSize).then(({data})=>{
          //更新总记录数
          this.total=data.pr.total;
          //更新总记录数集合
          this.students=data.pr.rows;

        })
      },
      //1.3 查询所有班级
      findClasses(){
        findClasses().then(({data})=>{
          this.classes = data.list;
        })
      },
      //1、4条件查询带分页
      search(){
        search(this.page,this.pageSize,this.studentSearch).then(({data})=>{

          //更新总记录数
          this.total=data.pr.total;
          //更新总记录数集合
          this.students=data.pr.rows;
        })
      },
      //添加学生
      addUI(){
        //1.5.1 显示对话框
        this.dialogFormVisible = true
        //1.5.2 清空原来的表单内容
        this.student = {}
      },
      //保存学生
      save(){
        //1.6.1 根据是否有sid的值决定是添加还是修改
        let url = 'student/add';
        if(this.student.sid){
          url = 'student/update'
        }
        save(url,this.student).then((data)=>{
          const _this = this
          console.log("data:",data)
          if(data.code == 20000){
            this.$message({
              message: data.message,
              type: 'success',
              onClose(){
                //1. 关闭对话框
                _this.dialogFormVisible = false
                //2. 重新刷新页面
                _this.search()
              }
            });
          }
        })
      },
      //修改
      handleEdit(index, row) {
        this.dialogFormVisible=true;
        this.student=row;
      },
      //删除
      handleDelete(index, row) {
        //1.8.1 处理批理删除与单个删除的学生id，我们将其放到一个统一的数组中
        if(row){
          this.sids = [row.sid];
        }else{
          this.sids = this.multipleSelection.map(m=>m.sid);
        }
        //1.8.2 确认删除？
        this.$confirm(`是否删除编号为${this.sids}的学生？`, '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delStud(this.sids).then((data)=>{
            const _this = this
            if(data.code == 20000){
              this.$message({
                type: 'success',
                message: data.message,
                onClose(){
                  // ① 刷新页面
                  _this.search()
                }
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      /*//页大小发送改变时调用*/
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize=val;
        //this.findByPage();
        this.search();
      },
      //多项选择
      handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log(this.multipleSelection);
      },
      //
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page=val;
        //this.findByPage();
        this.search();
      }
    }
  }
</script>

<style scoped>
  #stud{
    padding: 10px;
  }
  .el-pagination{
    margin-top: 20px;
  }

</style>
